<template>
  <basic-dialog
    width="70%"
    :title="title"
    :visible="visible"
    :handleClose="handleClose"
  >
    <el-row>
      <slot name="warningMsg"></slot>
    </el-row>
    <el-form
      ref="formData"
      label-width="120px"
      class="input--reason--wrap"
      :model="formData"
      :rules="formRules"
    >
      <el-form-item prop="auditReasonType" :label="`${label}：`">
        <el-select v-model="formData.auditReasonType" clearable>
          <el-option
            v-for="option in reasonOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="auditReasonNote" label="原因详情：">
        <el-input
          type="textarea"
          resize="none"
          v-model.trim="formData.auditReasonNote"
          placeholder="请输入原因详情"
          :autosize="{ minRows: 3, maxRows: 4 }"
          :maxlength="100"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <el-row slot="ft" type="flex" justify="center">
      <el-button
        type="primary"
        v-preventReClick
        :loading="submitLoading"
        @click="handleOk">确定</el-button
      >
      <el-button
        v-preventReClick
        @click="handleCancel"
      >取消</el-button>
    </el-row>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
export default {
  components: {
    BasicDialog,
  },
  props: {
    // 弹框显隐开关
    visible: {
      type: Boolean,
      default: false
    },
    // 弹框标题
    title: {
      type: String,
      default: ''
    },
    // 原因类型label
    label: {
      type: String,
      default: ''
    },
    // 原因类型选项下拉
    reasonOptions: {
      type: Array,
      default: () => []
    },
    // 确定按钮点击触发方法
    onSubmit: {
      type: Function,
      default: () => {}
    },
    // 确定按钮点击触发方法前的钩子函数
    beforeSubmit: {
      type: Function
    }
  },
  data () {
    return {
      formData: {
        auditReasonType: '', // 原因类型
        auditReasonNote: '', // 原因详情
      },
      formRules: {}, // 表单校验规则
      submitLoading: false, // 确定按钮loading
    }
  },
  watch: {
    visible (val) {
      if (val) this.initRelativeInfo()
    }
  },
  methods: {
    // 提交
    handleOk () {
      const endingExecutor = () => {
        this.handleClose()
        this.clearAllState()
      }
      this.$refs['formData'].validate(async valid => {
        if (valid) {
          const configs = {
            data: this.formData,
            loadingFn: state => { this.submitLoading = state },
          }
          if (this.beforeSubmit) return this.beforeSubmit(configs, endingExecutor)
          const res = await this.onSubmit(configs)
          if (res) endingExecutor()
        } else {
          this.$message.warning('必填项不能为空')
        }
      })
    },
    // 取消
    handleCancel () {
      this.handleClose()
    },
    // 关闭弹框
    handleClose () {
      this.$emit('update:visible', false)
    },
    // 清空状态
    clearAllState () {
      this.$refs.formData.resetFields()
    },
    // 初始化弹框数据
    initRelativeInfo () {
      // 每次进入弹框，移除之前的校验结果
      this.$nextTick(() => {
        this.$refs.formData.clearValidate()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.input--reason--wrap {
  margin-top: 10px;
}
</style>
